<template>
  <view>
    <view class="movie-top">
      <uni-icons type="left" size="30" @click="goBack()" style="margin-right: 20rpx;"></uni-icons>

      <!--   城市选择   -->
      <view class="top-region" @click="selectCity()">
        <text>{{ map.name || '请选择城市' }}</text>
        <image
            src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/09/24db001ebcaa394dc6a823f9393c74646bmovie-xiala.png"></image>
      </view>

      <view class="top-tab-list">
        <view class="tab-list-items" @click="getTab(value.type,index)"
              :class="{'sel-item':value.type===tanIndex}" v-for="(value,index) in tabLists" :key="index">
          {{ value.text }}
          <view class="cut-img" v-if="tanIndex===value.type"></view>
        </view>
      </view>
    </view>
    <scroll-view :scroll-y="true" class="scroll-Y">
      <view class="movie-list-container">
        <movie-item
            v-for="(value,index) in dataList"
            :key="value.id"
            :data="value"
            :show-button="tanIndex===1"
            @click="getUrl(value)"
        ></movie-item>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import {onShow} from '@dcloudio/uni-app';

import {ref} from 'vue';
import MovieItem from './components/movie-item.vue';
import sheep from "@/sheep";

// 响应式状态定义
const tabLists = ref([{
  text: '正在热映',
  type: 1,
  isLoad: false,
  list: []
}]);
const tanIndex = ref(1);
const dataList = ref([]);
const index = ref(0);
const map = ref({
  name: '',
  id: 0
});
const loading = ref(false);
const error = ref(null);

onShow(async () => {
  if (uni.getStorageSync('xk-map') && uni.getStorageSync('xk-map').id !== map.value.id) {
    map.value = uni.getStorageSync('xk-map');
    loading.value = true;
    await getFilmList(map.value.id)
    loading.value = false;
  } else {
    await getCityList()
  }
});

// 方法定义
const goBack = () => {
  uni.navigateBack({delta: 1})
};

const getCityList = async () => {
  const res = await sheep.$api.xkMovie.getCityList();
  // 获取最近选择的城市
  const recentCity = uni.getStorageSync('xk-map');
  if (recentCity) {
    map.value = recentCity;
    await getFilmList(map.value.id);
  } else {
    uni.setStorageSync('xk-map', {id: res.data.data[0].id, name: res.data.data[0].name});
    map.value = uni.getStorageSync('xk-map');
    await getFilmList(map.value.id);
  }
};

const getFilmList = async (id) => {
  try {
    loading.value = true;
    error.value = null;
    const res = await sheep.$api.xkMovie.getHotMovieList({
      cityCode: id
    });
    if (res.code === 200) {
      dataList.value = res.data.movieList || [];
    } else {
      throw new Error('获取电影列表失败');
    }
  } catch (err) {
    console.error('加载电影列表错误:', err);
    error.value = '加载失败，请重试';
    dataList.value = [];
  } finally {
    loading.value = false;
  }
};

const selectCity = () => {
  sheep.$router.go('/pages/xk-movie/address-city')
};

const getUrl = (data) => {
  if (!map.value?.id) {
    uni.showToast({title: '请选择位置信息', icon: 'none'});
    return false;
  }
  // 参数验证
  if (!data?.id || !data?.name) {
    console.error('无效的电影数据:', data);
    uni.showToast({title: '数据异常，请重试', icon: 'none'});
    return false;
  }

  sheep.$router.go('/pages/xk-movie/cinema-list', data)
};

const getTab = (type, idx) => {
  index.value = idx;
  if (tanIndex.value !== type) {
    tanIndex.value = type;
  }
};

</script>

<style lang="scss" scoped>
.movie-top {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 30rpx 32rpx;
  z-index: 9999;
  margin-top: 88rpx;
}

.top-region {
  display: flex;
  align-items: center;

  text {
    color: #636775;
    font-size: 28rpx;
  }

  image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
  }
}

.top-tab-list {
  margin-left: 110rpx;
  display: flex;
  align-items: center;

  .tab-list-items {
    color: #636775;
    font-size: 28rpx;
    padding: 0rpx 25rpx;
    position: relative;
  }

  .sel-item {
    color: #2D3039 !important;
    font-size: 32rpx !important;
    font-weight: 600;
  }

  .cut-img {
    width: 52rpx;
    height: 8rpx;
    position: absolute;
    bottom: -30rpx;
    right: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FE602B;
  }
}

.sechut {
  margin-left: auto;
  width: 44rpx;
  height: 44rpx;
}

.scroll-Y {
  height: calc(100vh - 250rpx);
  margin-top: 20rpx;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}
</style>

